import './Sass/CodePage.scss'
import { useRequest, useTitle } from 'ahooks'
import { Http } from '../../../Common/Api'
import { useParams } from 'react-router-dom'
import { useEffect } from 'react'
import { useState } from 'react'

const Status = ['销毁', '检测中', '合格', '不合格']

const CodePage = () => {
    useTitle('智慧工地云平台')
    const { runAsync } = useRequest(Http, { manual: true })
    const { uuid } = useParams()

    const [OneData, setOneData] = useState({})
    const [TwoData, setTwoData] = useState([])
    const [ThrData, setThrData] = useState([])
    const [FouData, setFouData] = useState([])

    useEffect(() => {
        runAsync({ url: 'getGetOneBeamProduce', data: { beamUuid: uuid } }).then(res => {
            const { list, list1, list2, list3 } = res
            setOneData(list[0] || {})
            setTwoData(list1)
            setThrData(list2)
            setFouData(list3)
        })
    }, [runAsync, uuid])

    return (
        <div className="CodePage">
            <div className="OneData">
                <div>
                    {OneData.bridgeName}
                    {OneData.part}
                    {OneData.beamNo}
                </div>
                <div>当前台座 : {OneData.beamSeatName}</div>
            </div>
            <div className="TwoData">
                <div className="TitleSmall">
                    <div>混凝土强度比(%)</div>
                    <div />
                </div>
                <div className="tabs">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>状态</div>
                </div>
                <div className="list">
                    <div>{OneData.concreteStrength1}</div>
                    <div>{OneData.concreteStrength2}</div>
                    <div>{OneData.concreteStrength3}</div>
                    <div> {Status[OneData.auditStatus + 1]} </div>
                </div>
            </div>

            {TwoData.length !== 0 && (
                <div className="ThrData">
                    <div className="TitleSmall">
                        <div>施工日期</div>
                        <div />
                    </div>
                    {TwoData.map((item, index) => (
                        <div className="list" key={`dateIndex${index}`}>
                            <div>{item.tableName} : </div>
                            <div>{item.produceDate}</div>
                        </div>
                    ))}
                </div>
            )}

            {ThrData.length !== 0 && (
                <div className="FouData">
                    <div className="TitleSmall">
                        <div>施工人员</div>
                        <div />
                    </div>
                    <div className="title">
                        <div>人员姓名</div>
                        <div>工种</div>
                    </div>
                    {ThrData.map((item, index) => (
                        <div className="list" key={`personnelIndex${index}`}>
                            <div>{item.tableName}</div>
                            <div>{item.personTypeName}</div>
                        </div>
                    ))}
                </div>
            )}

            {FouData.length !== 0 && (
                <div className="FivData">
                    <div className="TitleSmall">
                        <div>质检报告</div>
                        <div />
                    </div>
                    {FouData.map(({ uuid, originalName, fileUrl }) => (
                        <div key={uuid} className="list" onClick={() => window.open(fileUrl)}>
                            {originalName}
                        </div>
                    ))}
                </div>
            )}
        </div>
    )
}

export default CodePage
